<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>栏目列表</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
  <h2>栏目列表</h2>
  <a th:href="@{/channel/add}" class="btn btn-primary mb-3">添加栏目</a>

  <table class="table table-striped">
    <thead>
    <tr>
      <th>ID</th>
      <th>栏目名称</th>
      <th>栏目描述</th>
      <th>创建时间</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="channel : ${page.records}">
      <!-- 使用正确的属性名 -->
      <td th:text="${channel.cid}"></td>
      <td th:text="${channel.cname}"></td>
      <td th:text="${channel.channelDesc}"></td>
      <!-- 使用 #dates.format() 处理 Date 类型 -->
      <td th:text="${#dates.format(channel.createTime, 'yyyy-MM-dd HH:mm')}"></td>
      <td>
        <a th:href="@{/channel/edit/{id}(id=${channel.cid})}" class="btn btn-sm btn-warning">编辑</a>
        <a th:href="@{/channel/delete/{id}(id=${channel.cid})}" class="btn btn-sm btn-danger" onclick="return confirm('确定删除吗？')">删除</a>
      </td>
    </tr>
    </tbody>
  </table>

  <nav aria-label="Page navigation">
    <ul class="pagination">
      <li class="page-item" th:classappend="${page.current == 1} ? 'disabled'">
        <a class="page-link" th:href="@{/channel/list(pageNum=1)}">首页</a>
      </li>
      <li class="page-item" th:classappend="${page.current == 1} ? 'disabled'">
        <a class="page-link" th:href="@{/channel/list(pageNum=${page.current}-1)}">上一页</a>
      </li>

      <li class="page-item" th:each="i : ${#numbers.sequence(1, page.pages)}"
          th:classappend="${i == page.current} ? 'active'">
        <a class="page-link" th:href="@{/channel/list(pageNum=${i})}" th:text="${i}"></a>
      </li>

      <li class="page-item" th:classappend="${page.current == page.pages} ? 'disabled'">
        <a class="page-link" th:href="@{/channel/list(pageNum=${page.current}+1)}">下一页</a>
      </li>
      <li class="page-item" th:classappend="${page.current == page.pages} ? 'disabled'">
        <a class="page-link" th:href="@{/channel/list(pageNum=${page.pages})}">尾页</a>
      </li>
    </ul>
  </nav>
</div>
</body>
</html>